{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}股票数据挖掘分析系统{% endblock %}</title>
    <base href="/">

    <!--    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">-->
    <link rel="stylesheet" href="{% static 'plugins/bootstrap.min.css' %}">
    <style>
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            width: 100%;
            margin: 0;
        }

<!--        .main-content {-->
<!--            flex: 1;-->
<!--        }-->

        body li {
            margin-right: 5px;
        }

<!--        .sticky-md-top {-->
<!--            box-shadow: 0 5px 10px #aaa;-->
<!--        }-->

<!--        .bg-light {-->
<!--            box-shadow: 0 0 10px 5px #aaa;-->
<!--        }-->


        #back-to-top {
            display: none;
            position: fixed;
            bottom: 60px;
            right: 20px;
            height: 52px;
            width: 52px;
              background-image: url("");
            background-size: contain;
            background-repeat: no-repeat;
            border-radius: 5px;
            cursor: pointer;
        }

        img {
            max-width: 100%; /* 确保图片不会超过其容器的宽度 */
            height: auto; /* 保持图片的宽高比 */
        }


    .loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000; /* 确保加载动画显示在最上层 */
}
    .search-container {
<!--            position: relative;-->
            width: 300px;
<!--            margin: 20px;-->
        }

        .search-results {
            position: absolute;
<!--            width: 100%;-->
            background: white;
            border: 1px solid #ddd;
            max-height: 300px;
            overflow-y: auto;
            display: none;
            z-index: 1000;
        }

        .search-item {
            padding: 8px 12px;
            cursor: pointer;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .search-item:hover {
            background-color: #f5f5f5;
            border: 1px solid red;
        }

        .search-button {
            margin-left: 10px;
            padding: 4px 8px;
            cursor: pointer;
            border: 1px solid #ddd;
            background-color: #f0f0f0;
        }

        .search-button:hover {
            background-color: #e0e0e0;

        }

        .submit-button {
            padding: 4px 8px;
            cursor: pointer;
            border: 1px solid #ddd;
            background-color: #f0f0f0;
        }

        .submit-button:hover {
            background-color: #e0e0e0;
        }

    </style>

    {% block css %}

    {% endblock %}

    {% block js %}

    {% endblock %}
</head>
<body>
{#导航栏#}
<div class="sticky-md-top  bg-primary-subtle">
    <header  class="container col-12 d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-1">
        <a href="/home/" class="d-flex align-items-center col-md-5 mb-2 mb-md-0 text-dark text-decoration-none">
            <img src=""
                 alt="logo">
        </a>

        <ul class="nav col-md-auto mb-2 justify-content-center mb-md-0">
            <li><a href="/home/" class="btn btn-light px-2 link-dark">首页</a></li>
            <li><a href="/market" class="btn btn-light px-2 link-dark">行情</a></li>
            <li><a href="/prediction" target="_blank" class="btn btn-light px-2 link-dark">个股预测分析</a></li>
        </ul>

        <div class="col-md-3 text-end">
            <div style="text-align: right">
                {% if user.is_authenticated %}
                <!-- 用户已登录的情况 -->
                <p>Welcome, <a href="{% url 'user_view' %}" target="_blank">
                    <button type="button" class="btn btn-secondary">{{ user.username }}</button>
                </a>!
                    <a href="/logout">
                        <button type="button" class="btn btn-danger">Logout</button>
                    </a>
                </p>
                {% else %}
                <!-- 用户未登录的情况 -->
                <p style="color: red;font-size: larger">你还没有登录！请登录。</p>
                {% endif %}
            </div>
        </div>
    </header>
</div>
<button id="back-to-top"></button>
<!--新建区域-->
<div style="width: 90%;margin: 0 auto;">
    <div>
        {% block content %}
        {% endblock %}
    </div>
</div>
{#页脚#}
<div class="footer mt-auto py-1" style="height: 50px">
    <div class="container fs-4">
        <footer class="py-3 my-4">
            <ul class="nav justify-content-center border-bottom pb-3 mb-3">
                <li class="nav-item"><a href="https://www.eastmoney.com/" class="nav-link px-2 text-muted"
                                        target="_blank">东方财富</a></li>
                <li class="nav-item"><a href="https://tushare.pro/" class="nav-link px-2 text-muted" target="_blank">Tushare</a>
                </li>
                <li class="nav-item"><a href="https://v5.bootcss.com/docs/getting-started/introduction/"
                                        class="nav-link px-2 text-muted" target="_blank">Bootstrap</a></li>
                <li class="nav-item"><a href="https://echarts.apache.org/zh/index.html" class="nav-link px-2 text-muted"
                                        target="_blank">ECharts</a></li>
                <li class="nav-item"><a href="https://scikit-learn.org.cn/" class="nav-link px-2 text-muted"
                                        target="_blank">scikit-learn</a></li>
            </ul>

            <p class="text-center text-muted">
                Copyright © 202009602022, 梁慧 <a href="https://beian.miit.gov.cn/"
                                                  target="_blank">桂ICP备2024034969号</a></p>

        </footer>
    </div>
</div>

</body>

<!--<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.0/echarts.min.js"></script>-->

<!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>-->
<script src="{% static 'plugins/echarts.min.js' %}"></script>
<script src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
<script>
    $(document).ready(function () {
        var button = $('#back-to-top');
        $(window).scroll(function () {
            if ($(document).scrollTop() > 20 || $(window).scrollTop() > 20) {
                button.css('display', 'block');
            } else {
                button.css('display', 'none');
            }
        });

        button.click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 100);
        });
    });
</script>

{% block script %}

{% endblock %}
</html>
